<template>
	<div>
		<el-dialog :fullscreen="state.isFullScreen" v-model="state.isShowDialog"  center class="borderRadius10" :show-close="false" width="1280">
			<template #header>
				<div class="flex" style="justify-content: space-between;align-items: center;">
					<div class="" style="flex:1">&nbsp</div>
					<p class="font16" style="font-weight: bold; flex:3">某某品牌门店销售统计详情</p>
					<div class=" flex" style="justify-content: flex-end;align-items: center; flex:1">
						<el-icon class="ml10 font16" style="color:var(--el-color-info);cursor: pointer;"><ele-Download /></el-icon>
						<el-icon @click="fullScreen" class="ml10" style="color:var(--el-color-info);cursor: pointer;">
							<SvgIcon v-if="!state.isFullScreen" class="font16" name="iconfont icon-fullscreen" />
							<SvgIcon v-else class="font16" name="iconfont icon-tuichuquanping" />
						</el-icon>
						<el-icon @click="closeDialog" class="ml10 font16" style="color:var(--el-color-info);cursor: pointer;"><ele-Close /></el-icon>
					</div>
				</div>
			</template>
			<section class="dialogBox">
				<el-table :data="state.goodsTableData" style="width: 100%;">
                    <el-table-column label="门店名称">
                        <template #default="scope">
							<!-- <span>{{ scope.row.id }}</span> -->
							<span>门店名称</span>
						</template>
                    </el-table-column>
                    <el-table-column label="商品名称">
                        <template #default="scope">
							<!-- <span>{{ scope.row.id }}</span> -->
							<span>商品名称</span>
						</template>
                    </el-table-column>
                    <el-table-column label="品牌">
                        <template #default="scope">
							<!-- <span>{{ scope.row.id }}</span> -->
							<span>品牌</span>
						</template>
                    </el-table-column>
                    <el-table-column label="商品类型">
                        <template #default="scope">
							<!-- <span>{{ scope.row.id }}</span> -->
							<span>商品类型</span>
						</template>
                    </el-table-column>
                    <el-table-column label="商品规格">
                        <template #default="scope">
							<!-- <span>{{ scope.row.id }}</span> -->
							<span>商品规格</span>
						</template>
                    </el-table-column>
                    <el-table-column label="零售价">
                        <template #default="scope">
							<!-- <span>￥{{ scope.row.id }}元</span> -->
							<span>99.98</span>
						</template>
                    </el-table-column>
                    <el-table-column label="成交单价">
                        <template #default="scope">
							<!-- <span>￥{{ scope.row.id }}元</span> -->
							<span>99.98</span>
						</template>
                    </el-table-column>
                    <el-table-column label="销量">
                        <template #default="scope">
							<!-- <span>￥{{ scope.row.id }}元</span> -->
							<span>99</span>
						</template>
                    </el-table-column>
                    <el-table-column label="实收金额">
                        <template #default="scope">
							<!-- <span>{{ scope.row.id }}</span> -->
							<span>99</span>
						</template>
                    </el-table-column>
                    <el-table-column label="销售占比">
                        <template #default="scope">
							<!-- <span>{{ scope.row.id }}</span> -->
							<span>4.4%</span>
						</template>
                    </el-table-column>
                    <el-table-column label="毛利率">
                        <template #default="scope">
							<!-- <span>{{ scope.row.id }}</span> -->
							<span>4.4%</span>
						</template>
                    </el-table-column>
                    <el-table-column label="动销率">
                        <template #default="scope">
							<!-- <span>{{ scope.row.id }}</span> -->
							<span>4.4%</span>
						</template>
                    </el-table-column>
                    <el-table-column label="详情">
						<template #default="scope">
							<el-button   text type="primary" @click="onOpenEditRole()">
								详情
							</el-button>
						</template>
					</el-table-column>
                </el-table>
                <el-row justify="end">
                    <el-col :span="24" class="flex-end-center">
                        <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
                            :pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.param.pageNum" background
                            v-model:page-size="state.param.pageSize" layout="total, sizes, prev, pager, next, jumper"
                            :total="state.total">
                        </el-pagination>
                    </el-col>
                </el-row>
			</section>
		</el-dialog>
        <orderListDialog ref="orderListDialogRef" />
	</div>
</template>

<script setup lang="ts" name="cropper">
import { reactive, nextTick, ref, defineAsyncComponent } from 'vue';
import { productList } from '/@/api/commodity';
const orderListDialog = defineAsyncComponent(() => import('/@/views/statistical/goods/components/orderListDialog.vue'));

const orderListDialogRef = ref();

// 定义变量内容
const state = reactive({
	isShowDialog: false,
	isFullScreen: false,
	cropperImgBase64: '',
    param: {
		keyword: "",
		pageNum: 1,
		pageSize: 10,  
	},
    total: 0,
    goodsTableData:[],
});

// 打开弹窗
const openDialog = () => {
	state.isShowDialog = true;
	nextTick(() => {
		getGoodsList();
	});
};
// 切换放大缩小
const fullScreen = () => {
	state.isFullScreen = !state.isFullScreen;
};
// 关闭弹窗
const closeDialog = () => {
	state.isShowDialog = false;
};
// 取消
const onCancel = () => {
	closeDialog();
};
// 更换
const getGoodsList = async() => {
    state.loading = true;
	const { results } = await productList(state.param);
	state.loading = false;
	state.goodsTableData = results.records.slice(0,1);
	state.total = results.total;
};

// 订单详情
const onOpenEditRole = (item?: any) => {
	orderListDialogRef.value.openDialog();
};

// 分页点击条数
const onHandleSizeChange = (val: number) => {
	state.param.pageSize = val;
    getGoodsList();
};
// 分页点击
const onHandleCurrentChange = (val: number) => {
	state.param.pageNum = val;
    getGoodsList();
}

// 暴露变量
defineExpose({
	openDialog,
});
</script>
<style scoped lang="scss">
:deep(.el-overlay){
	.el-overlay-dialog .el-dialog .el-dialog__body{
		padding-top: 10px !important;
	}
}
:deep(.el-table){
	flex: 1;
	.el-table__inner-wrapper::before{
		background: none !important;
	}
}

// // 非全屏模式下
// :deep(.el-dialog){
// 	display: flex;
//     flex-direction: column;
// 	.el-dialog__body{
// 		display:flex;
// 		flex-direction:column;
// 		height: inherit;
// 		flex:1;
// 		.dialogBox{
// 			display:flex;
// 			flex-direction:column;
// 			flex:1;
// 			height: inherit;
// 			.el-table{
// 				flex: 1;
// 			}
// 		}
// 	}
// }


// 全屏模式下样式
:deep(.is-fullscreen){
	display:flex;
	flex-direction:column;
	max-height:100vh;
	.el-dialog__body{
		display:flex;
		flex-direction:column;
		height: inherit;
		flex:1;
		max-height: none !important;
		.dialogBox{
			display:flex;
			flex-direction:column;
			flex:1;
			height: inherit;
			.el-table{
				flex:1;
			}
		}
	}
}

</style>
